<template>
  <div class="serverbox">
    <div class="box-server">
      <div class="box-leftButton">
        <el-button type="primary" @click="addVisible">新增配置</el-button>
      </div>
      <div class="box-table">
        <el-table :data="tableData"
                  style="width: 100%;height:calc(100% - 20px)"
                  border
                  max-height="800">
          <el-table-column label="服务器配置名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否开启">
            <template slot-scope="scope">
                <el-input v-model=" scope.row.value" :show-overflow-tooltip="true"
          :formatter="addvalue" autocomplete="off"></el-input>
                  <!-- <el-switch
                  v-model="value1"
                  >
                </el-switch> -->
            </template>
          </el-table-column>
          <el-table-column label="变量名">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column label="配置参数说明">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.desc }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
    </div>
     <el-dialog title="新增配置" :visible.sync="dialogTableVisible">
        <el-form :model="form">
        <el-row :gutter="32">
          <el-col :span="20">
            <el-form-item label="服务器配置名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="变量名" :label-width="formLabelWidth">
              <el-input v-model="form.region" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="配置参数说明" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.desc" rows="10" style="resize:none;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {Username,Usernameload} from "@/api/user"
export default {
  data() {
    return {
      configs:{

      },
      dialogTableVisible:false,
      formLabelWidth:"120px",
       value1: true,
       form: {
          name: '',
          region: '',
          desc: '',
          value1:""
        },
      tableData: [{
        explain: 'XMPP 心跳超时值 ',
        name: 15,
        Variablename: 'XMPPTimeout',
        Parameter: "此值为秒数，超过这个秒数未收到心跳则视为离线；同时重启Tigase才能生效"
      }, {
        explain: '是否启用消息回执',
        name: 15,
        Variablename: 'isOpenReceipt',
        Parameter: "默认为关闭，使用流管理的回执"
      }, {
        explain: '是否开启短信验证码',
        name: 15,
        Variablename: 'isOpenSMSCode',
        Parameter: "默认为关闭，使用流管理的回执"
      }, {
        explain: '是否开启集群模式',
        name: 15,
        Variablename: 'isOpenCluster',
        Parameter: ""
      },
      {
        explain: 'HTTP是否安全验证',
        name: 15,
        Variablename: 'isOpenCluster',
        Parameter: ""
      },
      {
        explain: '手机号搜索用户',
        name: 15,
        Variablename: 'telephoneSearchUser',
        Parameter: ""
      },
      {
        explain: '昵称搜索用户',
        name: 15,
        Variablename: 'nicknameSearchUser	',
        Parameter: ""
      },
      {
        explain: '手机号登陆',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      }, {
        explain: '用户ID登陆',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      }, {
        explain: '使用手机号或者用户名注册',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      }, {
        explain: '注册邀请码',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: '敏感词过滤',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: '保存单聊聊天记录',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: '保存群聊聊天记录',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: 'iOS推送平台',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: '是否开启voip推送',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      {
        explain: '短信服务支持',
        name: 15,
        Variablename: 'isTelephoneLogin	',
        Parameter: ""
      },
      ],
      search: ''
    }
  },
  created(){
    // this.listdata();
    this.listdata2();
  },
  methods:{
    // listdata(){
    //   Username(this.configs).then((response)=>{
    //   })
    // },
    listdata2(){
      Usernameload().then((response)=>{
        console.log(response);
        this.tableData=response.data;
      })
    },
      addVisible(row){
        console.log(row);
        this.dialogTableVisible=true;
      },
       addvalue(row,column){
       console.log(row);
      const statusdit= row.value;
      console.log(statusdit);
        if(statusdit==1){
            return "开启"
        }else if(statusdit==0){
          return "关闭"
        }
      },
  }
}
</script>
<style lang="scss" scoped>
.serverbox {
  height: 100%;
  .box-server {
    height: 100%;
    background-color: #ffff;
    margin: 20px 20px 20px 20px;
    .box-table {
      overflow-x: auto;
      padding: 20px 20px 20px 20px;
    }
  }
  .box-leftButton{
    padding:16px;
  }
}
::v-deep .el-table th {
  background-color: #f2f2f2 !important;
}
</style>
